@mixin scaleBar() {
  $dark_color: $interactive_text_color;
  $light_color: $background_color;

  $block_width: 25%;
  $block_height: 50%;

  $line_thickness: 3px;
  $tic_height: 9px;

  $offset_for_unit_label: 2ch;

  $border_style: floor($line_thickness/2) solid rgba($light_color, 0.25);

  .esri-scale-bar.esri-widget {
    background: transparent;
    box-shadow: none;
  }

  .esri-scale-bar__bar-container {
    position: relative;
    display: flex;
    align-items: flex-end;
    transition: width 250ms ease-in-out;
  }

  .esri-scale-bar__bar-container--ruler {
    flex-direction: column;
  }

  .esri-scale-bar__bar-container--line:last-child {
    align-items: flex-start;
  }

  .esri-scale-bar__ruler {
    display: flex;
    flex-wrap: wrap;
    height: 6px;
    background-color: $light_color;
    margin: 0 $offset_for_unit_label 0 ($offset_for_unit_label / 4);
    @include defaultBoxShadow();
  }

  .esri-scale-bar__ruler-block {
    height: $block_height;
    width: $block_width;
    background-color: $dark_color;
  }

  // top row
  .esri-scale-bar__ruler-block:nth-child(-n + 2) {
    margin-right: 25%;
  }

  // bottom row
  .esri-scale-bar__ruler-block:nth-child(n + 3) {
    margin-left: 25%;
  }

  .esri-scale-bar__line {
    position: relative;
    height: $line_thickness;
    background-color: $dark_color;
    bottom: 0;
    left: 0;
    right: $offset_for_unit_label;
  }

  .esri-scale-bar__line--bottom {
    top: -$line_thickness;
    border-bottom: $border_style;
  }

  // tics
  .esri-scale-bar__line--top:before,
  .esri-scale-bar__line--top:after,
  .esri-scale-bar__line--bottom:before,
  .esri-scale-bar__line--bottom:after {
    content: "";
    display: block;
    width: $line_thickness;
    height: $tic_height;
    background-color: $dark_color;
    position: absolute;
    border-right: $border_style;
  }

  .esri-scale-bar__line--top:before {
    bottom: 0;
    left: 0;
  }

  .esri-scale-bar__line--top:after {
    bottom: 0;
    right: 0;
  }

  .esri-scale-bar__line--bottom:before {
    top: 0;
    left: 0;
  }

  .esri-scale-bar__line--bottom:after {
    height: $tic_height - $line_thickness + 1;
    top: $line_thickness - 1;
    right: 0;
  }

  .esri-scale-bar__label-container {
    position: relative;
  }

  .esri-scale-bar__label-container--line {
    position: relative;
    left: -$offset_for_unit_label;
  }

  .esri-scale-bar__label-container--ruler {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .esri-scale-bar__label {
    font-size: $text_size_small;
    text-shadow: 0 0 1px $light_color, 0 0 1px $light_color, 0 0 1px $light_color;
    color: $text_color;
    font-weight: $text_weight_title;
    white-space: nowrap;
    padding: 0.5em 0 0.7em 0;
  }

  html[dir="rtl"] {
    .esri-scale-bar__ruler {
      margin: 0 ($offset_for_unit_label / 4) 0 $offset_for_unit_label;
    }

    .esri-scale-bar__label-container--line {
      left: auto;
      right: -$offset_for_unit_label;
    }
  }
}

@if $include_ScaleBar == true {
  @include scaleBar();
}
